<template>
	<view>
		<view class="footer_box" :class="{'footer_bg': bg}">
			<view class="footer_item" v-for="(item, index) of navigationList" :key="index" @click="onPageJump(item.pagePath)">
				<text class="footer_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
			</view>
		</view>
		<view v-if="bg" class="footer_station"></view>
	</view>
</template>
<script>
export default {
	props: {
		bg: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			path: '',
			navigationList: [
				{
					pagePath: 'pages/shortVideo/home',
					text: '首页'
				},
				{
					pagePath: 'pages/shortVideo/dynamic',
					text: '动态'
				},
				{
					pagePath: 'pages/shortVideo/mall',
					text: '商城'
				},
				{
					pagePath: 'pages/shortVideo/my',
					text: '我的'
				}
			]
		};
	},
	//第一次加载
	created() {
		//获取所有页面
		let currentPages = getCurrentPages();
		let page = currentPages[currentPages.length - 1];
		this.path = page.route;
	},
	//方法
	methods: {
		onPageJump(url) {
			if (this.path !== url) {
				uni.switchTab({
					url: "/" + url
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.footer_station {
	height: 100rpx;
}
.footer_box {
	height: 90rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}
.footer_bg {
	background-color: #1a1b20;
}
.footer_item {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.footer_item:active {
	background-color: rgba($color: #fff, $alpha: 0.1);
}
.footer_item_text {
	font-size: 28rpx;
	color: rgba($color: #FFF, $alpha: 0.2);
	margin-top: 6rpx;
}
.footer_item_text_active {
	color: #ffffff;
}
</style>
